<template>
  <div class="container">
    <h1>模型管理</h1>
    
    <!-- 模型管理 -->
    <div class="card">
      <h2>可用模型</h2>
      <button @click="listModels">列出可用模型</button>
      <div v-if="models.length > 0">
        <h3>模型列表:</h3>
        <ul>
          <li v-for="model in models" :key="model">{{ model }}</li>
        </ul>
      </div>
      
      <div v-if="models.length > 0">
        <h3>加载模型</h3>
        <select v-model="selectedModel">
          <option v-for="model in models" :key="model" :value="model">{{ model }}</option>
        </select>
        <button @click="loadModel">加载选中模型</button>
      </div>
      <p v-if="loadModelStatus">{{ loadModelStatus }}</p>
    </div>
    
    <!-- 导航链接 -->
    <div class="navigation">
      <h3>快速导航</h3>
      <router-link to="/">AI回答</router-link>
      <router-link to="/generate">文本生成</router-link>
      <router-link to="/finetune">模型微调</router-link>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'ModelManagementView',
  setup() {
    const models = ref([])
    const selectedModel = ref('')
    const loadModelStatus = ref('')

    // 列出可用模型
    const listModels = async () => {
      try {
        const response = await fetch('/api/v1/models')
        
        // 检查响应状态
        if (!response.ok) {
          throw new Error(`HTTP错误，状态码: ${response.status}`)
        }
        
        // 确保响应是JSON格式
        const contentType = response.headers.get('content-type')
        if (!contentType || !contentType.includes('application/json')) {
          throw new Error('响应不是JSON格式')
        }
        
        // 解析JSON数据
        const data = await response.json()
        
        // 确保models.value始终是一个数组
        models.value = Array.isArray(data.models) ? data.models : []
        
        // 利用后端返回的额外信息提供更准确的用户提示
        if (data.extra_info) {
          console.log('额外信息:', data.extra_info)
          
          if (models.value.length === 0) {
            if (data.extra_info.ollama_enabled) {
              // Ollama已启用但没有模型
              if (data.extra_info.hint) {
                loadModelStatus.value = data.extra_info.hint
              } else {
                loadModelStatus.value = 'Ollama服务已启用，但未找到可用模型。\n请检查：\n1. Ollama服务是否正常运行\n2. 是否已使用ollama pull命令下载模型'
              }
            } else {
              // Ollama未启用
              loadModelStatus.value = '暂无已加载模型。\n请检查：\n1. 网络连接是否正常（尝试连接Hugging Face）\n2. 系统资源是否足够加载本地模型'
            }
          }
        } else {
          // 兼容旧版本API响应
          if (models.value.length === 0) {
            loadModelStatus.value = '暂无已加载模型。可能的原因：\n1. Ollama服务未找到可用模型\n2. 网络问题导致无法连接Hugging Face'
          }
        }
        
        console.log('获取到的模型列表:', models.value)
      } catch (error) {
        console.error('获取模型列表失败:', error)
        loadModelStatus.value = `获取模型失败: ${error.message}\n请检查后端服务是否正常运行和网络连接情况`
        // 发生错误时也确保models.value是一个数组
        models.value = []
      }
    }

    // 加载模型
    const loadModel = async () => {
      if (!selectedModel.value) {
        loadModelStatus.value = '请先选择模型'
        return
      }
      
      try {
        const response = await fetch('/api/v1/models/load', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ model_name: selectedModel.value })
        })
        if (!response.ok) {
          const errorData = await response.json()
          loadModelStatus.value = `加载模型失败: ${errorData.detail || '未知错误'}`
          return
        }
        const data = await response.json()
        loadModelStatus.value = data.message
        listModels() // 重新获取模型列表
      } catch (error) {
        loadModelStatus.value = '加载模型失败: 可能是网络连接问题或后端服务异常'
        console.error('加载模型失败:', error)
      }
    }

    return {
      models,
      selectedModel,
      loadModelStatus,
      listModels,
      loadModel
    }
  }
}
</script>